<template>
  <div class="ueditor">
    <div :id="randomId" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
export default {
  name: "Ueditor",
  props: {
    articleContent: String,
    ueditorConfig: {
      initialFrameWidth: "100%",
      initialFrameHeight: 400
    }
  },
  data() {
    return {
      randomId: "editor_" + Math.random() * 100000000000000000,
      //编辑器实例
      editor: null,
      ready: false
    };
  },
  watch: {
    articleContent(val) {
      if (val != null && this.ready) {
        this.editor = UE.getEditor(this.randomId, this.ueditorConfig);
        this.editor.setContent(val);
      }
    }
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      this.$nextTick(() => {
        this.editor = UE.getEditor(this.randomId, this.ueditorConfig);
        // 绑定事件，当 UEditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
        this.editor.addListener("ready", () => {
          this.ready = true;
          this.$emit("ready", this.editor);
        });
      });
    },

    // return 文本数据到父组件
    getUEContent() {
      return this.editor.getContent();
    }
  },
  beforeDestroy() {
    // 组件销毁的时候，要销毁 UEditor 实例
    if (this.editor !== null && this.editor.destroy) {
      this.editor.destroy();
    }
  }
};
</script>

<style lang="scss">
</style>